<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./js/vue.js"></script>
    <div id='app'>
        <cpn1></cpn1>
        <cpn2></cpn2>
        <!-- <div>
            <h2>标题1</h2>
            <p>内容1</p>
        </div> -->
    </div>

    <script>
        const cpnC1 = Vue.extend({
            template: `
            <div>
                <h2>标题1</h2>
                <p>内容1</p>
            </div>
            `
        })
        //父组件使用子组件
        const cpnC2 = Vue.extend({
            template: `
            <div>
                <h2>标题2</h2>
                <p>内容2</p>
                <cpn1><cpn1/>
            </div>
            `,
            components:{
                //全局注册：全局使用，
                //局部注册：哪里注册哪里使用
                cpn1:cpnC1//父子关系
            }
        })
        let app = new Vue({
            el: "#app",
            data: {
                msg: 'hello world'
            },
            components:{//局部注册
                cpn1:cpnC1,//同级关系，一块注册
                cpn2:cpnC2
            }
        })
    </script>
</body>

</html>